<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8"/>
    <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>

    <!--    引入vue-->
    <script src="js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--    引入axios-->
    <script src="js/axios.min.js"></script>
    <!--    表格颜色颜色样式-->
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
    <title>form</title>
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" content="学生课程管理系统">
    </el-page-header>
    <el-divider content-position="right">{{ studentInfo.name }}你好</el-divider>

    <el-row>
        <el-col :span="8">
            <!--        搜索表单-->
            <el-form
                    :inline="true"
                    :model="course"
                    class="demo-form-inline"
                    size="small"
            >
                <el-form-item label="课程编号">
                    <el-input v-model="course.course_id" placeholder="请输入课程编号">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="joinCourse">加入课程</el-button>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="test">测试</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <!--        课程罗列-->
    <el-divider v-if="courses_num" content-position="left">我的课程</el-divider>
    <div style="width: 80%">
        <el-row>
            <el-col :span="4" v-for="(o, index) in courses_num" :key="o">
                <div style="border-radius: 4px;min-height: 36px;padding: 10px;">
                    <el-card :body-style="{ padding: '0px' }">
                        <img src="./img/book.svg"
                             class="image">
                        <div style="padding: 14px;">
                            <span>{{ courses[index].course }}</span>
                            <div class="bottom clearfix">
                                <time class="time">{{ studentInfo.name }}</time>
                                <el-button type="text" class="button" @click="jumpCourse(index)">查看作业</el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>

</div>

<script>
    new Vue({
        el: "#app",
        created() {
            // window.location.href 属性返回当前页面的 URL。
            let url = decodeURI(window.location.href); // 对获取url的url进行解码   decodeURI()函数可对encodeURI()函数编码过的 URI 进行解码。
            let urlParsm = url.split("?obj=");  // 获取url携带的参数

            this.studentInfo = urlParsm ? JSON.parse(urlParsm[1]) : ''; //判断参数是否存在 存在的话对对参数进行转换
            this.course.student_id = this.studentInfo.id;
            this.getCourses();
        },
        data() {
            return {
                studentInfo: {},
                //加入课程信息
                course: {},
                //获取老师的课程信息
                courses: [],
                courses_num: 0,

                //图片
                currentDate: new Date(),
                //老师的课表数据

                //复选框选中数据集合
                multipleSelection: [],
                //条件搜索表单
                team: {
                    teamArea: "",
                    stu1Name: "",
                    teamName: "",
                    stu1Phone: "",
                },
                //数据框表单隐藏选项
                dialogVisible: false,
                //分页
                currentPage: 1,
            };
        },
        methods: {
            //页头返回
            goBack() {
                window.location.replace(document.referrer);
            },

            //获取学生的所有课程
            getCourses() {
                _this = this
                //发送请求数据
                axios({
                    method: "post",
                    url: "/selectCourseBS",
                    data: this.course,
                }).then(function (resp) {
                    if (resp.data.status === 200) {
                        _this.courses = resp.data.courses;
                        _this.courses_num = resp.data.courses_num;
                    } else {

                    }
                });
            },

            //加入课程
            joinCourse() {
                if (!this.course.course_id) return;
                this.course.student_id = this.studentInfo.id
                _this = this
                //发送请求数据
                axios({
                    method: "post",
                    url: "/joinCourse",
                    data: this.course,
                }).then(function (resp) {

                    if (resp.data.status === 200) {
                        //添加失败
                        _this.$message({
                            message: "开设课程成功",
                            type: "success",
                        });
                        //关闭对话框
                        _this.dialogVisible = false;
                        location.reload();
                    } else {
                        _this.$message({
                            message: '开设课程失败',
                            type: 'error'
                        });
                        //关闭对话框
                        _this.dialogVisible = false;
                    }

                });
            },
            //跳转到课程信息
            jumpCourse(Index) {
                console.log(this.courses[Index].course_id);
                this.studentInfo.course_id = this.courses[Index].course_id;
                this.studentInfo.course_name = this.courses[Index].course;
                window.location.href = '/static/sCourse.html?obj=' + JSON.stringify(this.studentInfo);
            }
            ,

            test() {
                console.log('studentInfo', this.studentInfo);
                console.log('courses', this.courses_num);
                console.log('courses', this.courses);
            }
            ,
            //搜索条件表单,调用查询方法
            onSubmit() {
                console.log(this.team);
            }
            ,
        },
    })
    ;
</script>

<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>


</body>
</html>
